<template>
	<view class="content">

		<view class="img-body">
			<image class="title-img" src="../../../static/jb.png" mode=""></image>
		</view>

		<!-- 密码登录 -->
		<!-- <p class="tit" v-if="zhuantai==1">密码登录</p> -->
		<!-- 短信登录 -->
		<!-- <p class="tit" v-if="zhuantai==2">手机验证码登录</p> -->

		<view class="Hong">
			<p>账号</p>
			<input type="text" placeholder="请输入手机号" maxlength="11" v-model="hongp" style="border-radius: 10rpx;" />
		</view>

		<view class="Hong_a" v-if="zhuantai==1">
			<p>密码</p>
			<input type="password" placeholder="6-20位数字或者字母" maxlength="20" v-model="mima_mi" style="border-radius: 10rpx;" />
		</view>

		<!-- 短信登录 -->
		<view class="Hong_a" v-if="zhuantai==2">
			<p>密码</p>
			<input type="password"  placeholder="请输入6位验证码" maxlength="20" v-model="yanzma"   style="border-radius: 10rpx;"/>
			<view class="Hong_b" v-if="yanz" @click="huoqus">获取验证码</view>
			<view class="Hong_b" v-if="!yanz">
				<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes="false" bg-color="#EEF2F5"
				 @end="jieshu">
				</u-count-down>
			</view>
		</view>

		<view class="tishi">
			<view class="tishi_t" @click="zhu">注册</view>
			<view class="tishi_t" @click="wangji">忘记密码？</view>
		</view>

		<view class="denglu" @click="jingzhuye">
			登 录
		</view>

		<view class="tishi_bottom" v-if="zhuantai==1">
			<view class="tishi_a" @click="mima">手机验证码登录</view>
		</view>
		<!-- 短信登录 -->
		<view class="tishi_bottom" v-if="zhuantai==2">
			<view class="tishi_a" @click="yanzhen">密码登录</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhuantai: 1,
				timestamp: 59,
				yanz: true,
				hongp: '',
				yan_fanhui: '',
				mima_mi: '',
				yanzma: '',
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#FE3548',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			async denglu() {
				if (!this.hongp) return uni.$showMsg('请填写手机号码!');
				let obj = {
					type: this.zhuantai,
					mobile: this.hongp,
					password: this.mima_mi,
					code: this.yanzma
				};
				const res = await this.$u.post("api/index/login", obj, {});
				console.log(res.code, 'mmmmmmmmmmmmmmmmm')
				if (res.code == 1) {
					uni.switchTab({
						url: '../Home_a'
					})
				}
				uni.setStorageSync('uid', res.data.id)

				uni.$showMsg(res.msg)
			},
			async yanzhengma() {
				let obj = {
					mobile: this.hongp,
				};
				const res = await this.$u.post("api/index/sendSms", obj, {});
				console.log(res.msg, 5555555555)
				// this.yanzma = res
				uni.$showMsg(res.msg)
			},
			mima() {
				this.zhuantai = 2
			},
			yanzhen() {
				this.zhuantai = 1
			},
			zhu() {
				wx.navigateTo({
					url: 'zhuce'
				})
			},
			wangji() {
				wx.navigateTo({
					url: 'wanjimima'
				})
			},
			jieshu() {
				this.yanz = true
			},
			huoqus() {
				if (this.hongp == "") {
					uni.$showMsg("请先填写正确的手机号")
				} else {
					this.yanz = false
					this.yanzhengma()
					// uni.$showMsg(this.yan_fanhui)
				}

			},
			jingzhuye() {
				this.denglu()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-body {
		text-align: center;
		padding-top: 190rpx;

		.title-img {
			width: 170rpx;
			height: 170rpx;
		}
	}


	.tit {
		width: 300rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 50rpx;
		color: #333333;
		padding-top: 150rpx;
		margin-left: 24rpx;
	}

	.Hong {
		width: 620rpx;
		height: 58rpx;
		margin: 0 auto;
		margin-top: 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		p {
			font-size: 34rpx;
		}

		input {
			width: 460rpx;
			height: 58rpx;
			font-size: 24rpx;
			background-color: #EEF2F5;
			padding: 0 25rpx;
		}
	}

	.Hong_a {
		width: 620rpx;
		height: 58rpx;
		margin: 0 auto;
		margin-top: 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius:10rpx ;

		p {
			font-size: 34rpx;
			flex-shrink: 0;
			padding-right: 45rpx;
		}

		input {
			width: 100%;
			height: 58rpx;
			font-size: 24rpx;
			background-color: #EEF2F5;
			padding: 0 25rpx;
		}

		.Hong_b {
			flex-shrink: 0;
			color: #999999;
			font-size: 24rpx;
			padding-left: 10rpx;
		}
	}

	.denglu {
		width: 620rpx;
		height: 100rpx;
		background-color: #4b8eff;
		margin: 0 auto;
		margin-top: 40rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		font-weight: 800;
		font-size: 40rpx;
		border-radius: 10rpx;
	}

	.tishi_bottom {
		width: 610rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		text-align: center;

		.tishi_a {
			font-size: 28rpx;
		}
	}

	.tishi {
		width: 610rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;


		.tishi_t {
			font-size: 22rpx;
			color: #4b8eff;
		}

		.tishi_a {
			width: 300rpx;
			color: #4b8eff;
			font-size: 24rpx;
			margin-left: 30rpx;
		}

		.tishi_b {
			color: #666666;
			font-size: 24rpx;
			margin-right: 50rpx;
		}
	}
</style>
